<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>宝贝投-P2P平台</title>
		<!-- links begin -->
		<link rel="shortcut icon" href="favicon.ico" />
        <link rel="stylesheet" href="js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="css/core.css" type="text/css" />
        <script type="text/javascript" src="js/jquery/jquery-2.1.3.js"></script>
        <script type="text/javascript" src="js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
        <script type="text/javascript" src="js/jquery.bootstrap.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
        <!-- links end -->
	</head>
	<body>
		<!-- 网页顶部 begin -->
		<div class="el-header" ></div>
		<!-- 网页顶部 end -->
		
		<!-- 网页导航 begin -->
        <div class="el-navbar navbar navbar-default"> </div>
        <!-- 网页导航 end -->
		
		<!-- banner广告部分 start -->
		<div class="container-fuil">
			<div id="carousel-banner-generi" class="carousel slide el-banner" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#carousel-banner-generi" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-banner-generi" data-slide-to="1"></li>
				</ol>
				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="images/banner01.jpg" alt="...">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="images/banner02.jpg" alt="...">
						<div class="carousel-caption"></div>
					</div>
				</div>
				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-banner-generi" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-banner-generi" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		<!-- banner广告部分 end -->
		
		<!-- 项目3大特色feature -->
		<div class="container el-feature" style="padding-left: 15%;">
			<dl class="el-feature-item01">
				<dt>简单便捷</dt>
				<dd>100元即可出借<br />直接出借更便捷</dd>
			</dl>
			<dl class="el-feature-item02">
				<dt>资金存管</dt>
				<dd>隔离客户资金<br />行业安全第一</dd>
			</dl>
			<dl class="el-feature-item03">
				<dt>省心无忧</dt>
				<dd>多维智能匹配<br/>资金小额分散</dd>
			</dl>
		</div>
		
		<!-- 投资列表 -->
		<div class="container el-panel">
			<div class="panel el-panel">
				<div class="panel-title">
					<span class="pull-left">
						进行中
					</span>
					<div class="pull-right">
						<a class="btn btn-link " href="invest.html">
							进入投资列表
						</a>
					</div>
				</div>
				<table id="tblBorrow" class="table el-table table-hover">
					<thead>
					<tr>
						<th>借款人</th>
						<th width="380px">借款标题</th>
						<th>年利率</th>
						<th>借款金额</th>
						<th>还款方式</th>
						<th>进度</th>
						<th></th>
						<th width="80px">操作</th>
					</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
			
			
		<!-- 页脚 begin -->
        <div class="container-foot-2"></div>
        <!-- 页脚 end -->
</body>
	<script type="text/javascript">

        // 查询条件对象
        let queryObject = new Object();
        queryObject.borrowStates = BORROW_STATE_CONST.BIDDING + ',' + BORROW_STATE_CONST.LOAN_PENDING + ',' + BORROW_STATE_CONST.REPAYMENT;

        $(function() {

            // 加载公共顶部模板
            $('.el-header').load('tpl-head.html');

            // 加载网站导航栏模板
            $('.el-navbar').load('tpl-navbar.html');

            // 加载左侧菜单栏模板
            $('.el-leftmenu').load('tpl-leftmenu.html');

            // 加载页脚模板
            $('.container-foot-2').load('tpl-footer.html');

            // '借款状态' 单选按钮事件
            $('#searchForm [name=borrowState]').change(function () {

                // 封装查询请求数据
                let borrowStates = $(this).val();
                queryObject.borrowStates = borrowStates;

                // 加载'借款审核'数据
                loadBorrow();

            });// change();

            // 加载'借款记录'
            loadBorrow();

        });// $(function());

        /** 加载'借款记录'数据 **/
        function loadBorrow(){

            // 加载'充值记录'数据
            $.post('http://localhost:8080/finance/borrow/query', queryObject, function (result) {

                // 如果返回的数据的响应码不是'成功(200)'
                if(result.code != 200) {
                    $.messager.alert(result.msg);
                    return;
                }

                // 如果返回的数据响应码为200
                // 就进行表格数据填充
                let pageResult = result.data;

                // 将分页集合赋值给全局变量
                borrowList = pageResult.listData;

                // 填充表格数据
                fillBorrowTable( pageResult.listData );

            });// $.post();

        }// loadBorrow();

        /** 填充表格数据 **/
        function fillBorrowTable( listData ) {

            // 清空表格数据
            $('#tblBorrow tbody').empty();

            // 如果没有集合数据，就直接返回
            if( !listData || listData.length == 0 ){
                // 设置没有数据提示
                $('#tblBorrow tbody').html('<tr><td colspan="8" align="center"><p class="text-danger">暂时没有招标信息</p></td></tr>');
                return;
            }// if();

            // 循环构造单元格数据，并进行填充
            for( let i = 0; i < listData.length; i++ ) {

                let borrow = listData[i];

                let tdBorrowUsername = '<td>' + borrow.borrowUsername + '</td>';
                let tdTitle = '<td>' + borrow.title + '</td>';
                // 年化利率
                let tdYearRate = '<td>' + borrow.yearRate + '%</td>';
                // 借款金额
                let borrowAmount = borrow.borrowAmount / MONEY_UNIT;
                let tdBorrowAmount = '<td>' + borrowAmount + '元</td>';
                // 还款方式
                let tdRepaymentType = '<td>' + REPAYMENT_TYPE[borrow.repaymentType] + '</td>';
                // 投标进度
                let bidPercent = (borrow.currentBidAmount / borrow.borrowAmount) * 100;
                let tdBidProgress = '<td><div class="progress" style="margin-bottom: 0px;"><div id="bidProgress" style="width: ' + bidPercent + '%;" class="progress-bar progress-bar-info progress-bar-striped"></div></div></td>';
                let tdBidPercent = '<td>' + bidPercent + '%</td>';

                // 如果投标进度不为'招标中',说明该标的已经不在招标进行中了，
				// 就显示投标状态
				if( borrow.borrowState != BORROW_STATE_CONST.BIDDING )
				    tdBidPercent = '<td>' + BORROW_STATE[borrow.borrowState] + '</td>';


                // '查看'按钮
                let tdEdit = '<td><a target="_blank" class="btn btn-danger btn-sm" href="borrow-info.html?id=' + borrow.id + '">查看</a></td>';

                // 将构造好的单元格数据，填充到表格中
                $('#tblBorrow tbody').append('<tr>' + tdBorrowUsername + tdTitle + tdYearRate + tdBorrowAmount + tdRepaymentType + tdBidProgress + tdBidPercent + tdEdit + '</tr>');

            }// for();

        }// fillBorrowTable( listData );

	</script>
</html>
